<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">

</head>
<body  style="background-image: url('../img/login.png')">
<div id="app">

    <div style="width: 400px;height: 600px;background-color: #b3e19d;opacity: 0.9;position: absolute;margin: 50px 0 0 550px;border-radius: 15px">
        <h1 style="line-height: 15px;text-align: center;margin-top: 50px">管理员Login</h1>

        <el-form style="position:absolute;margin:100px 0 0 0px" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
            <el-form-item label="工号" prop="jobNumber">
                <el-input type="jobNumber" v-model="loginForm.jobNumber" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
                <el-button @click="resetForm('loginForm')">重置</el-button>
            </el-form-item>
        </el-form>

        <p style="position:absolute;margin: 350px 0 0 120px">前往用户<a href="UserLogin.html">登录界面</a></p>
    </div>



</div>


<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{
            loginForm:{},

            //弹框表单（input）校验
            rules: {
                jobNumber: [
                    { required: true, message: '请输入工号', trigger: 'blur' },
                    { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                ],
            }
        },
        methods:{

            //提交表单
            submitForm(formName) {
                this.$refs.loginForm.validate((valid)=> {
                    if (valid) {
                        axios.post("/admins/loginAdmin",this.loginForm).then((res)=>{
                            console.log(res)
                            console.log(res.data.msg)
                            console.log(res.data.code)
                            if (res.data.code){
                                this.$message.success(res.data.msg)
                                localStorage.setItem('admin',JSON.stringify(res.data))
                                window.location.href='../admin/Admin.html';
                            }else {
                                this.$message.error(res.data.msg)
                                window.location.href='AdminLogin.html';
                            }
                        })
                    }
                })
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    })
</script>
</body>
</html>